import { Trans, t } from "@lingui/macro";
import "./points.scss";
import { numberToFixedCommas } from "lib/numbers";
import { useHistory } from "react-router-dom";
import Tooltip from "components/Tooltip/Tooltip";

export default function PointsDetail({ pageData }) {
  const history = useHistory();
  const openCreateReferral = () => {
    localStorage.setItem("Referrals-selected-tab", '"Affiliates"')
    history.push("/referrals")
  }

  const { lp, referral, swap, traderProfit, tradingVolume, referralCount } = pageData;

  return (
    <div className="flex items-stretch flex-row flex-wrap md:flex-nowrap items-center justify-between mb-[60px]">
      <div className="border-[1px] border-solid border-[#FFFFFF1A] flex-1 rounded-t-0 border-t-0">
        <div className="text-[16px] text-[#FFFFFF] leading-[20px] px-[25px] pt-10 max-md:px-[2.5rem] max-md:text-[20px]">
          Points Detail
        </div>
        <div className="w-full p-10 flex flex-row justify-end sm:px-[25px] pt-[20px] md:flex-wrap md:flex-nowrap max-md:flex-col">
          <div className="w-[100%] flex-1 md:w-[unset] md:pr-[27px] md:border-r md:border-[#FFFFFF1A] border-solid flex flex-col justify-between border-bottom">
            <div className="text-[20px] md:text-[14px] text-[#A8A8A8]">
              <Trans>Trading Points</Trans>
            </div>
            <div className="text-[34px] md:text-[14px] text-[#dffe00] mt-[16px] md:mt-[25px] font-bold">
              {numberToFixedCommas(tradingVolume || 0)}
            </div>
          </div>
          <div className="w-[100%] flex-1 md:w-[unset] md:px-[27px] md:border-r md:border-[#FFFFFF1A] border-solid flex flex-col justify-between border-bottom padding-top">
            <div className="text-[20px] md:text-[14px] text-[#A8A8A8]">
              <Trans>Liquidity Points</Trans>
            </div>
            <div className="text-[34px] md:text-[14px] text-[#dffe00] mt-[16px] md:mt-[25px] font-bold">
              <Tooltip
                handle={Number(lp) < 0 ? '--' : numberToFixedCommas(lp || 0)}
                className="text-none"
                renderContent={() => (
                  <p className="text-white">
                    <Trans>Liquidity Points includes Phase-1 + Phase-2</Trans>
                  </p>
                )}
              />
            </div>
          </div>
          <div className="w-[100%] flex-1 md:w-[unset] md:px-[27px] md:border-r md:border-[#FFFFFF1A] border-solid flex flex-col justify-between border-bottom padding-top">
            <div className="text-[20px] md:text-[14px] text-[#A8A8A8]">
              <Trans>Swap Points</Trans>
            </div>
            <div className="text-[34px] md:text-[14px] text-[#dffe00] mt-[16px] md:mt-[25px] font-bold">
              {numberToFixedCommas(swap || 0)}
            </div>
          </div>
          <div className="w-[100%] flex-1 md:w-[unset] md:pl-[27px] flex flex-col justify-between padding-top">
            <div className="text-[20px] md:text-[14px] text-[#A8A8A8]">
              <Trans>Profit Points</Trans>
            </div>
            <div className="text-[34px] md:text-[14px] text-[#dffe00] mt-[16px] md:mt-[25px] font-bold">
              {numberToFixedCommas(traderProfit || 0)}
            </div>
          </div>
        </div>
      </div>

      <div className="w-full md:w-[45%] border-[1px] border-solid border-[#FFFFFF1A] p-10 rounded-br-[5px] border-l-0 border-t-0">
        <div className="text-[20px] md:text-[16px] text-[#A8A8A8] leading-[20px] flex justify-between items-center">
          <div className="text-[#FF9D00] text-[16px] font-medium">Referral Points🔥🔥</div>
          <div className="bg-[#dffe00] text-[#000000] text-[14px] font-medium rounded-lg px-4 py-1.5 cursor-pointer" onClick={() => openCreateReferral()}><Trans>Referral Now →</Trans></div>
        </div>
        <div className="w-full flex flex-row justify-end sm:pt-[14px] md:flex-wrap md:flex-nowrap max-md:flex-col">
          <div className="w-[100%] flex-1 md:w-[unset] md:flex flex-col justify-between padding-top">
            <div className="text-[20px] md:text-[14px] text-[#A8A8A8]">
              <Tooltip
                handle={t`Total Invited`}
                renderContent={() => {
                  return (
                    <div>
                      <Trans>The invitee needs to complete any of the following operations to be considered a successful invitation: add liquidity, swap, open a position</Trans>
                    </div>
                  );
                }}
              />
            </div>
            <div className="text-[34px] md:text-[14px] text-[#dffe00] mt-[16px] md:mt-[25px] font-bold">
              {referralCount || 0} <Trans> * 200 Points</Trans>
            </div>
          </div>
          <div className="w-[100%] flex-1 md:w-[unset] md:flex flex-col justify-between padding-top">
            <div className="text-[20px] md:text-[14px] text-[#A8A8A8]">
              <Tooltip
                handle={t`Trading Points Rebate`}
                renderContent={() => {
                  return (
                    <div>
                      <Trans>After the inviter binds the invitation code, the inviter can get an additional 50% of the points generated by the invitee's Perp.</Trans>
                    </div>
                  );
                }}
              />
            </div>
            <div className="text-[34px] md:text-[14px] text-[#dffe00] mt-[16px] md:mt-[25px] font-bold">
              {numberToFixedCommas(referral || 0)} <Trans>Points</Trans>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
